<template>
  <div class="table-page" :style="`width:${width};`">
    <el-table
      v-if="table"
      ref="multipleTable"
      :row-class-name="rowClassName"
      :show-summary="showSummary"
      :summary-method="summaryMethod || null"
      :data="tableData"
      :stripe="stripe"
      :border="border"
      :row-key="getRowKey"
      :height="height"
      :max-height="maxHeight"
      :size="size"
      tooltip-effect="dark"
      style="width: 100%"
      :highlight-current-row="highlightCurrentRow"
      :cell-class-name="cellClassName"
      :empty-text="emptyText"
      :show-header="showHeader"
      :span-method="spanMethod || null"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
      @current-change="handleActiveCurrent"
      @select="singleSelection ? handleRadioChange : handleSelect"
    >
      <!-- :summary-method="summaryMethod ? summaryMethod:null" -->
      <!-- <el-table-column
        :align="align"
        width="60"
      >
        <template scope="scope">
          <div v-if="scope.row.markTag" class="markBox">
            <span :class="`markTag ${scope.row.markTag.class}`">{{ scope.row.markTag.value }} </span>
          </div>
        </template>
      </el-table-column> -->
      <slot />
      <el-table-column
        v-if="selection"
        :key="1"
        :align="align"
        :selectable="selectable"
        type="selection"
        :disabled="true"
        :reserve-selection="true"
        width="55"
      />
      <el-table-column v-if="singleSelection" :key="2" :align="align" type="radio" width="55" />
      <el-table-column
        v-if="showIndex"
        :label="indexLabel || '序号'"
        class-name="textCenter"
        type="index"
        :index="indexMethod"
        :width="indexWidth"
        :fixed="showIndexfixed"
      />
      <el-table-column v-if="expand" width="55" type="expand" :align="align">
        <template slot-scope="props">
          <div>
            <div class="expandContent_wrapper">
              <div v-for="(item, index) in expandHeader" :key="index" class="expandContent">
                <div class="expandContent_header" :style="{ 'text-align': align }">
                  <span>{{ item.label }}</span>
                </div>
                <div
                  v-for="(_item, _index) in props.row[expandScoped]"
                  :key="_index"
                  :class="[item.class || '', 'expandContent_body']"
                  :style="{ 'text-align': align }"
                >
                  <slot v-if="item.render ? item.render : false" :row="_item" :name="item.prop" />
                  <span v-else>
                    {{ _item[item.prop] }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <template v-for="(item, _index) in tableColumn">
        <el-table-column
          v-if="!item.customeHeader"
          :key="_index + 2"
          :prop="item.prop"
          :align="item.align ? item.align : align"
          :sortable="item.sortable ? item.sortable : false"
          :sort-by="item.prop"
          :sort-orders="['ascending', 'descending', null]"
          :label="item.label"
          :width="item.width || ''"
          :show-overflow-tooltip="item.hideTooLtip ? false : true"
          :fixed="item.fixed || false"
        >
          <!-- v-if="checkPermission(item.roles)" -->
          <template slot-scope="scope">
            <slot v-if="item.render ? item.render : false" v-bind="scope" :name="item.prop" />
            <div v-else-if="item.type === 'markTag' && scope.row[item.prop]" class="markBox">
              <span :class="`markTag ${scope.row[item.prop].class}`">{{ scope.row[item.prop].value }} </span>
            </div>
            <img
              v-else-if="item.type == 'img'"
              :style="`height:${scope.row[item.prop].height ? scope.row[item.prop].height : '30px'};display:block`"
              :src="scope.row[item.prop].src"
            />
            <span v-else-if="item.type === 'infoTag' && scope.row[item.prop] === true" class="infoTag">tag</span>
            <div v-else-if="item.type == 'tag'">
              <el-tag v-for="tag in scope.row[item.prop]" :key="tag" style="margin-left: 5px" effect="dark">{{
                tag
              }}</el-tag>
            </div>
            <!-- v-show="item.hide?(item.hideValue.indexOf(scope.row[item.hide])===-1 ?true:false):true" -->
            <div v-else-if="item.type === 'switch'">
              <el-switch
                v-if="scope.row[item.prop] !== undefined"
                v-model="scope.row[item.prop]"
                :active-text="activeText ? activeText : ''"
                :inactive-text="inactiveText ? inactiveText : ''"
                @change="
                  (v) => {
                    handleSwitchChange(v, scope.row)
                  }
                "
              />
              <span v-else>-</span>
            </div>

            <div v-else-if="item.type === 'button'">
              <span v-for="(btn, index) in item.buttons" :key="index">
                <el-button
                  v-if="!btn.policy || checkPermission(btn.policy)"
                  v-show="btn.hide ? (btn.hideValue.indexOf(scope.row[btn.hide]) === -1 ? false : true) : true"
                  :class="`button-text ${item.class || ''} button-span`"
                  :size="size"
                  :disabled="btn.limit ? (btn.limitValue == scope.row[_item.limit] ? false : true) : false"
                  :type="btn.type || 'text'"
                  @click="
                    (e) => {
                      labelMethod(e, btn.method || item.method[index], scope.row, btn)
                    }
                  "
                >
                  <span :class="`${btn.class || ''}`" :style="`color: ${btn.color || ''}`">{{ btn.label }}</span>
                </el-button>
              </span>
            </div>

            <div v-else-if="item.type === 'iconButton'">
              <el-button
                v-for="(_item, index) in item.button"
                v-show="_item.hide ? (_item.hideValue.indexOf(scope.row[_item.hide]) === -1 ? true : false) : true"
                :key="_item.label"
                size="mini"
                :class="`button-text ${item.class || ''}`"
                :icon="_item.icon"
                :disabled="_item.limit ? (_item.limitValue == scope.row[_item.limit] ? true : false) : false"
                :type="_item.type || 'text'"
                @click="
                  (e) => {
                    labelMethod(e, _item.method || item.method[index], scope.row, _item)
                  }
                "
              >
                <span :class="`${_item.class || ''}`">{{ _item.label }}</span>
              </el-button>
            </div>

            <el-progress
              v-else-if="item.type === 'progress'"
              :status="getStatus(scope.row[item.prop])"
              :percentage="scope.row[item.prop]"
            />

            <span
              v-else
              :class="item.class || ''"
              @click="
                (e) => {
                  columnClick(e, item.event, scope.row)
                }
              "
            >
              <span
                v-if="scope.row.innerTag && scope.row.innerTag.prop === item.prop"
                :class="`inner-tag ${scope.row.innerTag.class}`"
              >
                {{ scope.row.innerTag.value }}
              </span>
              {{
                scope.row[item.prop] !== undefined
                  ? scope.row[item.prop]
                  : item.prop === 'is-check' || item.type === 'markTag'
                  ? ''
                  : '-'
              }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="item.customeHeader"
          :key="_index + 2"
          :prop="item.prop"
          :align="item.align ? item.align : align"
          :sortable="item.sortable ? item.sortable : false"
          :sort-by="item.prop"
          :sort-orders="['ascending', 'descending', null]"
          :width="item.width || ''"
          :show-overflow-tooltip="item.hideTooLtip ? false : true"
          :fixed="item.fixed || false"
        >
          <template slot="header">
            <slot :name="item.headerSlot" />
          </template>
          <template slot-scope="scope">
            <slot v-if="item.render ? item.render : false" v-bind="scope" :name="item.prop" />
            <span
              v-else
              :class="item.class || ''"
              @click="
                (e) => {
                  columnClick(e, item.event, scope.row)
                }
              "
            >
              <span
                v-if="scope.row.innerTag && scope.row.innerTag.prop === item.prop"
                :class="`inner-tag ${scope.row.innerTag.class}`"
                >{{ scope.row.innerTag.value }}
              </span>
              {{
                scope.row[item.prop] !== undefined
                  ? scope.row[item.prop]
                  : item.prop === 'is-check' || item.type === 'markTag'
                  ? ''
                  : '-'
              }}</span
            >
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div v-if="simplePage">
      <el-pagination
        v-if="showPage"
        style="margin-top: 22px; text-align: center"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-else-if="nosizesPage">
      <el-pagination
        v-if="showPage"
        background
        style="margin-top: 22px; text-align: right"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-else>
      <el-pagination
        v-if="showPage"
        background
        style="padding-top: 22px; padding-bottom: 22px; text-align: right; background-color: #fff"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
/**
 * @description table组件，基于element的table组件改装，实现配置化表头数据调用
 */

import { checkPermission } from '@/utils/central'
export default {
  name: 'LPTablePage',
  components: {},
  props: {
    singleSelection: {
      type: Boolean,
      default: false // 默认关闭单选功能
    },
    indexWidth: {
      type: String,
      default: '100'
    },
    height: {
      type: [Number, String],
      default: undefined
    },
    maxHeight: {
      type: [Number, String],
      default: undefined
    },
    width: {
      type: String,
      default: 'auto'
    },
    table: {
      type: Boolean,
      default: true
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    showIndexfixed: {
      type: [Boolean, String],
      default: 'left'
    },
    currentPage: {
      type: Number,
      default: 1
    },
    activeText: {
      type: String,
      default: ''
    },
    inactiveText: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'left'
    },
    border: {
      type: Boolean,
      default: false // 为了可拖动宽度改为true
    },
    simplePage: {
      type: Boolean,
      default: false
    },
    nosizesPage: {
      type: Boolean,
      default: false
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    selection: {
      type: Boolean,
      default: false
    },
    percentage: {
      type: Number,
      default: 70
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    showPage: {
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    limitCheck: {
      type: Array,
      default: () => []
    },
    selectable: {
      type: Function,
      default: () => {
        return true
      }
    },
    getStatus: {
      type: Function,
      default: () => {
        return ''
      }
    },
    clearTable: {
      type: Boolean,
      default: false
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    indexLabel: {
      type: String,
      default: '' // 序号
    },
    indexLabelWidth: {
      type: Number,
      default: 50 //
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    // eslint-disable-next-line vue/require-default-prop
    summaryMethod: {
      type: Function
    },
    // eslint-disable-next-line vue/require-default-prop
    rowClassName: {
      type: Function
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 30, 40]
      }
    },
    pageSize: {
      type: Number,
      default: 10
    },
    // 行列合并
    spanMethod: {
      type: Function
    },
    // 展开
    expand: {
      type: Boolean,
      default: false
    },
    expandHeader: {
      type: Array,
      default: () => []
    },
    expandScoped: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // pageSize: 10,
      // pageNum: 1,
      show_: false
    }
  },
  computed: {
    pageNum() {
      return this.currentPage
    }
  },
  watch: {
    clearTable: {
      handler(_new, _old) {
        if (_new) {
          this.clearSelection() // 执行清空操作
        } else {
          // 执行对应的操作
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {
    // this.refs
  },
  destroyed() {
    const tableColumn = this.tableColumn
    if (tableColumn[tableColumn.length - 1].method) {
      // 兼容旧版本method参数，新版本在button内传method
      tableColumn[tableColumn.length - 1].method.forEach((method) => {
        this.tableBus.$off(method)
      })
    } else {
      const index = tableColumn.findIndex((v) => v.type === 'button' || v.type === 'iconButton')
      if (index > -1) {
        tableColumn[index].button.forEach((item) => {
          this.tableBus.$off(item.method)
        })
      }
    }
  },
  methods: {
    checkPermission,
    // checkPermissionw(val){
    //   return checkPermission(val)
    // },
    clearSelection() {
      this.$refs.multipleTable.clearSelection()
    },
    setSelection(rows) {
      rows.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row)
      })
    },
    getRowKey(row) {
      return row.id
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      // this.pageNum = val;
      this.$emit('handleCurrentChange', val)
    },
    columnClick(e, v = '', row) {
      // if (item.stop) {
      //   e.stopPropagation()
      // }
      if (v) {
        this.tableBus.$emit(v, row)
      }
    },
    labelMethod(e, v, row, item) {
      // console.log('监听了table事件')
      if (item.stop) {
        e.stopPropagation()
      }
      this.$bus.$emit(v, row)
      // this.tableBus.$emit(v, row)
    },
    indexMethod(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1
    },
    handleSwitchChange(v, row) {
      // console.log("switch",v,row);
      this.$emit('handleSwitchChange', { value: v, row })
    },
    handleRowClick(row, column, event) {
      this.$emit('handleRowClick', row, column, event)
    },
    sortChange(val) {
      console.log('排序改变了', val)
      const sort = {
        ...val,
        order: val.order === 'ascending' ? 'ASC' : val.order === 'descending' ? 'DESC' : ''
      }
      this.$emit('handleSortChange', sort)
    },
    handleActiveCurrent(v) {
      this.$emit('handleActiveCurrent', v)
    },
    handleSelect(selection, row) {
      this.$emit('handleSelect', { selection, row })
    },
    handleRadioChange(selection, row) {
      this.$emit('handleRadioChange', { selection, row })
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (row.markTag && columnIndex === 0) {
        return 'no-padding'
      }
    },
    setCurrentRow(row) {
      // this.$emit('setCurrentRow', row)
      this.$refs.multipleTable.setCurrentRow(row)
    }
  }
}
</script>

<style lang="scss">
.table-page {
  /*鼠标移入某行时的背景色*/
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #e5f4ff;
  }
  .el-table--border {
    border-bottom: 1px solid #dfe6ec;
  }
  .el-table thead {
    font-size: 14px !important;
    th {
      height: 48px;
      padding: 0;
      div {
        font-weight: normal;
      }
    }
  }
  .el-table td {
    // border-bottom: none;
    // padding: 10px 0 !important;
    padding: 10px 0;
    font-size: 14px;
  }
  .el-table th {
    background-color: $table_header_bg;
  }
  // .el-table--striped .el-table__body tr.el-table__row--striped td{
  //  background:rgba(248,252,255,1);
  // }
  // ::v-deep.el-table--enable-row-hover .el-table__body tr:hover>td{
  //   background:rgba(244,249,252,1)!important;
  // }
  // .el-table--striped .el-table__body tr.el-table__row--striped td{
  //   background: #F6F7FB;
  // }

  .el-button--danger {
    background-color: $danger_color;
    &:hover {
      background-color: $danger_hover;
    }
  }
  .danger {
    color: $danger_color;
  }
  .el-table::before {
    background-color: transparent;
  }
  .el-pagination.is-background {
    color: #666666;
  }
  .el-pagination.is-background .el-pager li {
    background-color: #fff;
    font-weight: 400;
  }
  .el-pagination.is-background .el-pager li.active {
    background-color: #fff;
    color: #409eff;
  }
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next {
    background-color: #fff;
  }
  .el-table--medium th {
    padding: 12px 0;
  }
  .info-tag {
    background: $danger_color;
    color: #ffffff;
    display: block;
    width: 25px;
    height: 25px;
    line-height: 22px;
    border-radius: 15px;
    font-size: 10px;
  }
  .markBox {
    width: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .markTag {
      width: auto;
      height: 20px;
      margin-left: 10px;
      color: #ffffff;
      padding: 0 5px;
      border-radius: 2px;
      background: #83d06a;
      white-space: nowrap;
      font-size: 10px;
      span {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 8px;
        transform: rotate(-45deg);
      }
    }
  }
  .el-table th {
    padding: 12px 0;
  }
  .el-table th > .cell {
    font-weight: 700;
    color: #666;
    line-height: 24px;
  }
  .el-table th:first-child > .cell {
    padding-left: 20px;
  }
  .el-table td:first-child div {
    // width: 45px;
    // text-align: center;
    padding-left: 10px;
  }
  .el-table td:last-child div {
    // margin-left: -10px;
  }
  .el-table thead tr th:first-child {
    border-top-left-radius: 5px;
  }
  .el-table thead tr th:nth-last-child(2) {
    border-top-right-radius: 5px;
  }
  .el-button.is-disabled,
  .el-button.is-disabled:focus,
  .el-button.is-disabled:hover {
    color: #b1dbff;
  }
  .button-text {
    // width: auto;
    // height: auto;
    // font-size: 14px;
    margin-right: 5px;
  }
  .separator {
    margin: 0 10px;

    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background-color: #333;
  }
  // .button-span{
  //   display: inline-block;
  //   &:nth-of-type(1){
  //     background-color: red;
  //   }
  // }

  .is-check {
    color: $light_blue;
    font-size: 20px;
    display: none;
  }
  .current-row .is-check {
    display: block;
  }
  .isCheck {
    color: $light_blue;
    font-size: 20px;
    display: none;
  }
  .current-row .isCheck {
    display: block;
  }
  td.no-padding {
    padding: 0 !important;
    .cell {
      padding: 0 !important;
    }
    .mark-box {
      height: 52px;
      margin-top: 0px;
      margin-bottom: 0;
    }
  }
  .inner-tag {
    background: $danger_color;
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    text-align: center;
    line-height: 22px;
    color: #ffffff;
  }
  // .current-row {
  // 	color: $light_blue !important;
  // }
  /*以下样式兼容ie*/
  .el-table__header {
    width: 100% !important;
  }
  .el-table__body {
    width: 100% !important;
  }
  .is-center {
    text-align: left !important;
  }
  .el-table__body .el-table__row .cell.el-tooltip {
    width: auto !important;
  }

  // expand 取消原本展开旋转
  .el-table__expand-icon {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  .el-table__expand-icon .el-icon-arrow-right:before {
    content: '\e6d9';
    border: 1px solid #ccc;
    padding: 1px;
  }
  .el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: '\e6d8';
  }
  // expandContent
  .el-table__expanded-cell {
    padding: 0 !important;
  }
  .expandContent_wrapper {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    border-top: 1px solid #dfe6ec;

    .expandContent {
      flex: 1;
      //   height: 48px;
      // line-height: 48px;
      .expandContent_header,
      .expandContent_body {
        border-bottom: 1px solid #dfe6ec;
        height: 48px;
        line-height: 48px;
      }
      // .expandContent_body{

      // }
    }
  }
  .expandTable {
    width: 100%;
  }
}

.bd {
  border: 1px solid #000;
}
</style>
